<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript"
            src='//webapi.amap.com/maps?v=1.3&key=160cab8ad6c50752175d76e61ef92c50&plugin=AMap.CitySearch'></script>
    <title>首页</title>
</head>
<body>
<!--头部-->
<header data-am-widget="header" class="am-header am-header-default index-nav" style="margin-bottom: 0;">
    <div class="am-header-left am-header-nav">
        <i class="am-icon-map-marker" style="font-size: 30px;color: #F77A28;"></i>
        <span style="font-size: 14px;color: #606060;" id="city"></span>
    </div>

    <h1 class="am-header-title">
        <button type="submit"
                style="outline:0 none !important; border: 1px solid #FF6600;color: #FF6600;background-color:white; width: 45%;border-radius: 20px;">
            客户
        </button>
    </h1>

    <div class="am-header-right am-header-nav">
        <img src="img/weather.jpg" style="width: 25px;height: 25px;" alt="">
        <span style="font-size: 12px;color:#6B6B6B;line-height: 3em;" id="weather">多云</span>
        <span style="font-size: 13px;color:#606060;" id="temperature">18-25℃</span>
    </div>
</header>
<!--轮播图-->
<div class="am-nav index-nav" style="margin-top: 0;">
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
        <ul class="am-slides">
            <li>
                <img src="img/extension-register.png">

            </li>
            <li>
                <img src="img/extension-register.png">

            </li>
            <li>
                <img src="img/extension-register.png">

            </li>
            <li>
                <img src="img/extension-register.png">
            </li>
        </ul>
    </div>
</div>
<!--地点选择-->
<div class="am-nav index-nav" style="padding: 4%;">
    <form class="am-form am-form-horizontal">
        <div class="am-form-group" style="vertical-align: bottom;">
            <label for="pos1" class="am-u-sm-2 am-form-label" style="padding-left: 0 ;padding-right: 0">
                <img src="img/origin.png" alt="" style="width: 30px;">
            </label>
            <div class="am-u-sm-10 am-u-sm-pull-1">
                <input type="text" id="pos1" class="input-pos" placeholder="起始点"
                       style="border: 0;height: 45px;box-shadow: none;font-size: 18px;color: black;">
            </div>
        </div>
        <hr style="width: 90%;margin: 1% auto;">
        <div class="am-form-group" style="margin-top: 5%;">
            <label for="pos2" class="am-u-sm-2 am-form-label" style="padding-left: 0 ;padding-right: 0">
                <img src="img/end.png" alt="" style="width: 30px;">
            </label>
            <div class="am-u-sm-10 am-u-sm-pull-1">
                <input type="text" id="pos2" class="input-pos" placeholder="终点"
                       style="border:0; height: 45px;box-shadow: none;font-size: 18px;color: black;">
            </div>
        </div>
    </form>

</div>

<!--地图-->
<div id='container' hidden></div>

<!--待处理行程-->
<div class="am-nav index-nav" style="padding-top: 3%; padding-bottom: 3%;" id="unpaidOrder" hidden>

</div>

<!--未接单-->
<div class="am-nav index-nav" style="padding-top: 3%; padding-bottom: 3%;" id="openOrder" hidden>

</div>
<!--底部-->
<div style="height: 60px;"></div>
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default">
    <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color: rgb(254,103,0)">
        <li>
            <a href="javascript:0;" class="">
                <img src="img/home-this.svg" alt="首页"/>
                <span class="am-navbar-label" style="color: rgb(169,67,4)">首页</span>
            </a>
        </li>
        <li>
            <a href="community.html" class="">
                <img src="img/community.svg" alt="小社区"/>
                <span class="am-navbar-label">小社区</span>
            </a>
        </li>
        <li>
            <div style="position: fixed;bottom: 2px;left: 40.3%;width: 19.2%;">
                <a href="createCommunity.html">
                    <img src="img/add.jpg"
                         style="width: 60px; height: 60px; border-radius: 50%;box-shadow: darkgrey 0px -2px 10px 2px ;"/>
                </a>
            </div>
        </li>

        <li>
            <a href="order.html" class="">
                <img src="img/order.svg" alt="订单"/>
                <span class="am-navbar-label">订单</span>
            </a>
        </li>
        <li>
            <a href="me.html" class="">
                <img src="img/me.svg" alt="我的"/>
                <span class="am-navbar-label">我的</span>
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
<script type="text/javascript">

    //获取用户所在城市信息
    function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    $("#city").html(result.city);
                    showWeather(result.city);
                }
            } else {
                $("#city").html(result.info);
            }
        });
    };

    function showWeather(city) {
        AMap.service('AMap.Weather', function () {
            var weather = new AMap.Weather();
            //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
            weather.getLive(city, function (err, data) {
                if (!err) {
                    $("#weather").html(data.weather);
                    $("#temperature").html(data.temperature + "℃")
                }
            });
        });
    }



    $("#pos1").click(function () {
        window.location.href = "createOrder.html"
    });

    $("#pos2").click(function () {
        window.location.href = "createOrder.html"
    });


    $(function () {
        showCityInfo();
        getUnpaidOrder();
        getOpenOrder();
    })

</script>
</html>